<template>
	<!-- 摇一摇 -->
	<view class="content page" :class="{minH:isComponent==1}" :style="{'background-image':'url(' + imgUrl+getactrule.backImg + ')'}">
		<status-bar :title='getactrule.title' :goHome='fromShare'></status-bar>
		<view class="contentallbox" v-if='!msg'>
			<image class="tiImg" :src="getactrule.img?imgUrl+getactrule.img:staticUrl+'/lottery/yyy.png'" mode="widthFix"></image>
			<view class="turntable_w">
				<image class="turntable_wImg" :class="marquee?'_wImg':''" :src="staticUrl+'/lottery/zp.png'" mode="scaleToFill"></image>
				<image class="turntablephone" @click="shake" :class="active?'shark':''" :src="staticUrl+'/lottery/phone.png'"
				 mode="scaleToFill"></image>
			</view>
			<view class="winning">
				<swiper autoplay="true" interval="3000" duration="1000" circular="true" vertical="true" class="swiper"
				 disable-touch="true">
					<swiper-item v-for="(winn,index) in getactrule.winningUser" :key="index">
						<view class="swiper-item">{{winn.text}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="btnBox">
				<view @click="btnlook(3)" class="view_btn" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">活动说明</view>
				<view @click="btnlook(2)" class="view_btn" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">我的奖品</view>
			</view>
		</view>
		<empty type='1' v-if='msg' cat='2' :msg='msg'></empty>
		<showModel @cancelFunc='closeModel' v-if='showModal' type='2'></showModel>
		<Popup v-if="PopupIsShow" :viewText="getactrule.details" :types="types" :prizeDate="prizeDate" @closepopup="closePopups"></Popup>
	</view>
</template>

<script>
	import Popup from "../components/popup.vue"
	var that
	export default {
		props:['gid','isComponent'],
		components: {
			Popup
		},
		data() {
			return {
				showModal: false,
				audioCtx: null, // 音频实例
				marquee: true,
				active: false, // 是否开启摇一摇
				PopupIsShow: false,
				types: '', //弹窗类型
				bid: uni.getStorageSync('bid'),
				cid: '',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				prizeDate: '', //抽奖返回数据
				getactrule: '',
				global: {
					lastTime: 0, //此变量用来记录上次摇动的时间
					intervalTime: 500, // 两次摇一摇的间隔事件
					lastX: 0,
					lastY: 0,
					lastZ: 0, //此组变量分别记录对应x、y、z三轴的数值和上次的数值
					shakeSpeed: 150 //设置阈值
				},
				shakePhone: '',
				msg: '',
				ondrawing: false, // true正在抽奖 避免重复点击
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onHide() {
			uni.stopAccelerometer();
		},
		created() {
			if(this.isComponent == 1){
				that = this
				that.cid = this.gid
				// 监听摇一摇事件
				uni.onAccelerometerChange(that.starshake);
				uni.startAccelerometer();
				that.getinitialdata() //获取活动配置信息
				that.marquees()
				// 声明音频实例
				that.audioCtx = uni.createInnerAudioContext();
				that.audioCtx.src = that.staticUrl + '/static/lottery/shark.mp3';
				
			}
		},
		onLoad(e) {
			that = this
			if (e.cid) {
				that.cid = e.cid
				// 监听摇一摇事件
				uni.onAccelerometerChange(that.starshake);
				uni.startAccelerometer();
				that.getinitialdata() //获取活动配置信息
				that.marquees()
				// 声明音频实例
				that.audioCtx = uni.createInnerAudioContext();
				that.audioCtx.src = that.staticUrl + '/static/lottery/shark.mp3';
			}
			if(e.fromShare){that.fromShare = e.fromShare}
			
		},
		onShareAppMessage() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=17&gid=default&cid='+that.cid,
				imageUrl: shareData.imageUrl
			}
		},
		onShareTimeline() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.desc,
				query: {
					share_v_id: vid,
					pageType: 17,
					gid:'default',
					cid: that.cid
				},
				imageUrl: shareData.imageUrl
			}
		},
		methods: {
			closeModel() {
				that.showModal = false
				that.getinitialdata() //获取活动配置信息
				that.marquees()
			},
			/**
			 * 监听摇一摇具体业务
			 * acceleration [object] 返回加速度相关信息
			 */
			starshake(acceleration) {
				let vid = uni.getStorageSync("vid")
				if (vid == 0 || !vid) {
					that.showModal = true
					return
				}
				if (that.ondrawing) {
					return
				}
				that.ondrawing = true
				let nowTime = new Date().getTime(); //记录当前时间
				//如果这次摇的时间距离上次摇的时间有一定间隔 才执行
				if (nowTime - that.global.lastTime > 100) {
					let diffTime = nowTime - that.global.lastTime; //记录时间段
					that.global.lastTime = nowTime; // 记录本次摇动时间，为下次计算摇动时间做准备
					let x = acceleration.x; // 获取x轴数值，x轴为垂直于北轴，向东为正
					let y = acceleration.y; // 获取y轴数值，y轴向正北为正
					let z = acceleration.z; // 获取z轴数值，z轴垂直于地面，向上为正
					// 速度计算
					let speed = (Math.abs(x + y + z - that.global.lastX - that.global.lastY - that.global.lastZ) / diffTime) * 10000;
					//如果计算出来的速度超过了阈值，那么就算作用户成功摇一摇
					if (speed > that.global.shakeSpeed) {
						uni.stopAccelerometer();

						that.audioCtx.play();

						// 初始化样式
						that.actives()
						// 关闭摇一摇 ，并开始抽奖
						setTimeout(() => {
							uni.showLoading({
								title: "抽奖中"
							})
							that.getLuckDraw();
						}, 2000);
					}
					//赋值，为下一次计算做准备
					that.global.lastX = x;
					that.global.lastY = y;
					that.global.lastZ = z;

				}
			},
			getLuckDraw() {
				that.$http.post({
					url: '/SRA_LuckDraw/getPrize',
					data: {
						VeriCode: that.bid,
						cid: that.cid,
						v_id: uni.getStorageSync("vid")
					}
				}).then(res => {
					if (res.data && res.code == 100) {
						clearInterval(that.shakePhone)
						that.active = false
						if (res.data.prizeDate) {
							that.prizeDate = res.data
							setTimeout(() => {
								that.btnlook(1)
								uni.hideLoading()
								that.ondrawing = false
							}, 1500)
						} else {
							setTimeout(() => {
								that.btnlook(1)
								uni.hideLoading()
								that.ondrawing = false
							}, 1500)
						}
					} else {
						clearInterval(that.shakePhone)
						that.active = false
						that.ondrawing = false
						uni.showToast({
							icon: "none",
							title: res.notice,
							duration: 2000
						})
						uni.startAccelerometer();
					}
				})
			},

			marquees() {
				setInterval(() => {
					that.marquee = !that.marquee
				}, 300)
			},
			actives() {
				that.shakePhone = setInterval(() => {
					that.active = !that.active
				}, 300)
			},
			btnlook(i) {
				if (i == 1) {
					that.PopupIsShow = true
					that.types = i

				} else if (i == 2) {
					uni.getStorage({
						key: 'vid',
						success: function(res) {
							if (!res.data) {
								that.showModal = true
							} else {
								uni.navigateTo({
									url: "prizeList?cid=" + that.cid
								})
							}
						},
						fail() {
							that.showModal = true
						}
					})
				} else if (i == 3) {
					that.PopupIsShow = true
					that.types = i
				}
			},
			closePopups() {
				that.PopupIsShow = false
				that.getinitialdata()
				uni.startAccelerometer();
			},
			//获取活动配置信息
			getinitialdata() {
				that.$http.post({
					url: '/SRA_LuckDraw/config',
					data: {
						VeriCode: that.bid,
						cid: that.cid
					}
				}).then(res => {
					if (res.data && res.code == 100) {
						that.getactrule = res.data
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					} else {
						that.msg = res.notice
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 30upx;
		overflow: hidden;
		&.minH{
			min-height: calc(100vh - 100rpx)!important;
		}
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.contentallbox {
			width: 100%;
			height: 100%;
			position: relative;
			.tiImg {
				width: 560rpx;
				display: block;
				margin: 0 auto;
			}
			.turntable_w {
				width: 600upx;
				height: 600upx;
				box-shadow: 0px 3px 2px 1px rgba(123, 58, 229, 0.5);
				border-radius: 100%;
				border-radius: 100%;
				margin: 0 auto;
				position: relative;
				.turntable_wImg {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
				._wImg {
					transform: rotate(15deg);
				}
				.turntablephone {
					width: 562rpx;
					height: 632rpx;
					position: absolute;
					z-index: 5;
					left: -30rpx;
					bottom: 36rpx;
				}
				.shark {
					left: 4upx;
					bottom: 54upx;
					transform: rotate(30deg);
				}
			}
		
			.winning {
				width: 90%;
				margin-left: 5%;
				height: 60upx;
				border-radius: 10upx;
				background: rgba(0, 0, 0, 0.5);
				color: #f4c837;
				margin-top: 20upx;
				text-align: center;
				line-height: 60upx;
				.swiper {
					width: 100%;
					height: 100%;
				}
			}
			
			.btnBox {
				display: flex;
				justify-content: center;
				.view_btn {
					width: 310rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 32upx;
					color: #ae1f30;
					margin: 30rpx 16rpx;
				}
			}
		}
	}
</style>
